<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>

    </style>
</head>

<body>
    <input type="text" id="text">
    <p id="p_p"></p>
    <input type="password" id="password">
    <input type="button" value="提交" id="btn">


    <script>
        let arr = []
        // 防抖函数
        function debounce(fn, ms) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn();
                }, ms);
            }
        }

        let textChange = debounce(function () {
            let x = arr.some(item => item.name == text.value.trim())
            if (x) {
                p_p.innerText = `账号已注册，请重新输入`
                btn.disabled = true;
            } else {
                p_p.innerText = `账号可注册,请输入密码`
                btn.disabled = false;
            }
        }, 300);
        text.onkeyup = function () {
            textChange();
        }

        btn.onclick = function () {
            arr.push({
                name: text.value.trim(),
                password: password.value.trim()
            })
            console.log(arr);
            let arrStr = JSON.stringify(arr);
            localStorage.setItem('users', arrStr);
            text.value = '';
            password.value = ''
        }
    </script>
</body>

</html>